import { DownOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { SelectLang as UmiSelectLang, useModel, useRequest } from '@umijs/max';
import { Button, Dropdown, MenuProps, Select, Space, message } from 'antd';
import { useState } from 'react';

export type SiderTheme = 'light' | 'dark';

export const SelectProject = () => {
  const [selectedKeys, setSelectedKeys] = useState<any[]>([])
  const { initialState, setInitialState } = useModel('@@initialState');

  const items: MenuProps['items'] = initialState?.projectList?.map((item: any) => {
    return {
      label: <a>{item.name}</a>,
      key: item.id,
    }
  })

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    setSelectedKeys([e.key])
    setInitialState((s) => ({
      ...s,
      currentProject: initialState?.projectList?.find(item => item.id === e.key),
    }));
  };


  return !!items?.length ? <Dropdown menu={{
    items,
    selectable: true,
    defaultSelectedKeys: [initialState?.projectList?.[0]?.id],
    selectedKeys: selectedKeys,
    onClick: handleMenuClick
  }} placement='bottomRight'>
    <Button type='text' size='large'>
      {initialState?.currentProject?.name}
    </Button>
  </Dropdown> : <></>
};

export const SelectLang = () => {
  return <UmiSelectLang />;
};

export const Question = () => {
  return (
    <div
      style={{
        display: 'flex',
        height: 26,
      }}
      onClick={() => {
        window.open('https://pro.ant.design/docs/getting-started');
      }}
    >
      <QuestionCircleOutlined />
    </div>
  );
};
